<template>
  <div class="ptz-control">
    <div class="control-header">
      <div class="item">
        <span class="ll"
          ><i class="iconfont icon-tongyong_icon_yuntai" />云台控制</span
        >
      </div>
      <div class="item" v-show="showLock">
        <span
          class="ll"
          :class="{ pointer: isChecked }"
          @click="gotoRelevantEvents()"
          ><i
            class="iconfont icon-tongyong_icon_guanlianshijian_n"
          />关联事件</span
        >
      </div>
      <mv-count-down
        @startCallback="countDownS"
        @endCallback="countDownE"
        :locks="locks"
        :choosedCameraDevice="choosedCameraDevice"
        :optioning="optioning"
        ref="countDown"
        @gotoLockEvents="gotoLockEvents()"
      ></mv-count-down>
    </div>
    <div
      class="control-content"
      oncontextmenu="return false"
      ondragstart="return false"
      onselectstart="return false"
    >
      <div class="control-direction">
        <div class="direction">
          <i
            class="item"
            style="--rotate: -22.5deg"
            @touchstart="platformControl($event, 1, 1)"
            @touchend="platformControl($event, 1, 0)"
            @mousedown="platformControl(false, 1, 1)"
            @mouseup="platformControl(false, 1, 0)"
          ></i>
          <i
            class="item"
            style="--rotate: 22.5deg"
            @touchstart="platformControl($event, 6, 1)"
            @touchend="platformControl($event, 6, 0)"
            @mousedown="platformControl(false, 6, 1)"
            @mouseup="platformControl(false, 6, 0)"
          ></i>
          <i
            class="item"
            style="--rotate: 67.5deg"
            @touchstart="platformControl($event, 4, 1)"
            @touchend="platformControl($event, 4, 0)"
            @mousedown="platformControl(false, 4, 1)"
            @mouseup="platformControl(false, 4, 0)"
          ></i>
          <i
            class="item"
            style="--rotate: 112.5deg"
            @touchstart="platformControl($event, 8, 1)"
            @touchend="platformControl($event, 8, 0)"
            @mousedown="platformControl(false, 8, 1)"
            @mouseup="platformControl(false, 8, 0)"
          ></i>
          <i
            class="item"
            style="--rotate: 157.5deg"
            @touchstart="platformControl($event, 2, 1)"
            @touchend="platformControl($event, 2, 0)"
            @mousedown="platformControl(false, 2, 1)"
            @mouseup="platformControl(false, 2, 0)"
          ></i>
          <i
            class="item"
            style="--rotate: 202.5deg"
            @touchstart="platformControl($event, 7, 1)"
            @touchend="platformControl($event, 7, 0)"
            @mousedown="platformControl(false, 7, 1)"
            @mouseup="platformControl(false, 7, 0)"
          ></i>
          <i
            class="item"
            style="--rotate: 247.5deg"
            @touchstart="platformControl($event, 3, 1)"
            @touchend="platformControl($event, 3, 0)"
            @mousedown="platformControl(false, 3, 1)"
            @mouseup="platformControl(false, 3, 0)"
          ></i>
          <i
            class="item"
            style="--rotate: 292.5deg"
            @touchstart="platformControl($event, 5, 1)"
            @touchend="platformControl($event, 5, 0)"
            @mousedown="platformControl(false, 5, 1)"
            @mouseup="platformControl(false, 5, 0)"
          ></i>
        </div>
        <div class="scan">
          <i />
        </div>
      </div>
      <div class="control-other">
        <div class="item">
          <span>
            <el-tooltip
              content="聚焦缩小"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont icon-tongyong_yuntai_icon_jujiao-"
                :class="{ touch: cloudTouch === 10 }"
                @touchstart="cameraApertureMulChange($event, 10, 1)"
                @touchend="cameraApertureMulChange($event, 10, 0)"
                @mousedown="cameraApertureMulChange(false, 10, 1)"
                @mouseup="cameraApertureMulChange(false, 10, 0)"
              />
            </el-tooltip>
          </span>
          <span>
            <el-tooltip
              content="一键聚焦"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont icon-tongyong_yuntai_icon_yijianjujiao"
                @click="invalidOp"
              />
            </el-tooltip>
          </span>
          <span>
            <el-tooltip
              content="聚焦放大"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont icon-a-tongyong_yuntai_icon_jujiao"
                :class="{ touch: cloudTouch === 9 }"
                @touchstart="cameraApertureMulChange($event, 9, 1)"
                @touchend="cameraApertureMulChange($event, 9, 0)"
                @mousedown="cameraApertureMulChange(false, 9, 1)"
                @mouseup="cameraApertureMulChange(false, 9, 0)"
              />
            </el-tooltip>
          </span>
        </div>
        <div class="item">
          <span>
            <el-tooltip
              content="焦距缩小"
              placement="top"
              popper-class="c-tooltip"
              style="margin-top: 1px"
              :open-delay="500"
            >
              <i
                class="iconfont icon-tongyong_yuntai_icon_bianbei-"
                :class="{ touch: cloudTouch === 12 }"
                @touchstart="cameraApertureMulChange($event, 12, 1)"
                @touchend="cameraApertureMulChange($event, 12, 0)"
                @mousedown="cameraApertureMulChange(false, 12, 1)"
                @mouseup="cameraApertureMulChange(false, 12, 0)"
              />
            </el-tooltip>
          </span>
          <span>
            <el-tooltip
              content="焦距放大"
              placement="top"
              popper-class="c-tooltip"
              style="margin-top: 1px"
              :open-delay="500"
            >
              <i
                class="iconfont icon-a-tongyong_yuntai_icon_bianbei"
                :class="{ touch: cloudTouch === 11 }"
                @touchstart="cameraApertureMulChange($event, 11, 1)"
                @touchend="cameraApertureMulChange($event, 11, 0)"
                @mousedown="cameraApertureMulChange(false, 11, 1)"
                @mouseup="cameraApertureMulChange(false, 11, 0)"
              />
            </el-tooltip>
          </span>
        </div>
        <div class="item">
          <span>
            <el-tooltip
              content="光圈缩小"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont icon-tongyong_yuntai_icon_guangquan-"
                :class="{ touch: cloudTouch === 14 }"
                @touchstart="cameraApertureMulChange($event, 14, 1)"
                @touchend="cameraApertureMulChange($event, 14, 0)"
                @mousedown="cameraApertureMulChange(false, 14, 1)"
                @mouseup="cameraApertureMulChange(false, 14, 0)"
              />
            </el-tooltip>
          </span>
          <span>
            <el-tooltip
              content="光圈放大"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont icon-a-tongyong_yuntai_icon_guangquan"
                :class="{ touch: cloudTouch === 13 }"
                @touchstart="cameraApertureMulChange($event, 13, 1)"
                @touchend="cameraApertureMulChange($event, 13, 0)"
                @mousedown="cameraApertureMulChange(false, 13, 1)"
                @mouseup="cameraApertureMulChange(false, 13, 0)"
              />
            </el-tooltip>
          </span>
        </div>
        <div class="item">
          <span>
            <el-tooltip
              content="雨刷"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont icon-tongyong_yuntai_icon_yushua"
                v-if="!screenList[winChoosed]?.wiperOn"
                @click="lightEvents(1, 1)"
              />
              <i
                class="iconfont icon-tongyong_yuntai_icon_yushua on"
                v-if="screenList[winChoosed]?.wiperOn"
                @click="lightEvents(2, 1)"
              />
            </el-tooltip>
          </span>
          <span>
            <el-tooltip
              content="步长"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <el-input-number
                class="count"
                v-model="cameraApertureSpeed"
                controls-position="right"
                :min="cameraApertureSpeedMin"
                :max="cameraApertureSpeedMax"
                size="mini"
                @change="cameraApertureSpeedChange"
              >
              </el-input-number>
            </el-tooltip>
          </span>
        </div>
        <div class="item">
          <span>
            <el-tooltip
              content="透雾"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont icon-tongyong_yuntai_icon_yutianmoshi"
                v-if="!screenList[winChoosed]?.wuLightOn"
                @click="lightEvents(1, 3)"
              />
              <i
                class="iconfont icon-tongyong_yuntai_icon_yutianmoshi on"
                v-if="screenList[winChoosed]?.wuLightOn"
                @click="lightEvents(2, 3)"
              />
            </el-tooltip>
          </span>
          <span>
            <el-tooltip
              content="灯光"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont icon-tongyong_yuntai_icon_dengguangkai"
                v-if="!screenList[winChoosed]?.lightOn"
                @click="lightEvents(1, 2)"
              />
              <i
                class="iconfont icon-tongyong_yuntai_icon_dengguangkai on"
                v-if="screenList[winChoosed]?.lightOn"
                @click="lightEvents(2, 2)"
              />
            </el-tooltip>
          </span>
        </div>
        <div class="item">
          <span>
            <font>巡航</font>
            <el-tooltip
              :content="videoChoosed?.cruisePause ? '巡航恢复' : '巡航暂停'"
              placement="top"
              popper-class="c-tooltip"
              :open-delay="500"
            >
              <i
                class="iconfont"
                :class="
                  videoChoosed?.cruisePause
                    ? 'icon-liebiao-bofang'
                    : 'icon-liebiao-tingzhi'
                "
                @click="doCruisePause()"
              />
            </el-tooltip>
            <font class="time" v-if="videoChoosed?.cruisePause">{{
              videoChoosed?.cruisePauseTime
            }}</font>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* 引入全局js */
import MvCountDown from "./MvCountDown";
import {
  doCameraFocusOrZoom,
  doControlPreset,
  doLock,
  doPatrol,
  doPtzCmds,
  doRelease,
  doSwitchLight,
  queryPlatFormLockInfo,
} from "@/api/video/video";
export default {
  name: "video-controller",
  components: {
    MvCountDown,
  },
  props: {
    screenList: {
      //视频树
      type: [Array, Boolean],
      default: false,
    },
    winChoosed: {
      //选中的窗口
      type: Number,
      default: 0,
    },
    choosedCameraDevice: {
      //选中的窗体对应的摄像头编码
      type: String,
    },
    loginInfo: {
      type: Object,
      default: {},
    },
    showLock: {
      type: Boolean,
      default: true,
    },
    vueIns: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      videoTreeNew: [], //格式化视频树
      channelList: [], //通道列表
      videoTreeSearch: "", //视频树检索
      videoTreeLookFlag: false, //视频树全部展开折叠标识
      videoTreeMore: false, //视频树列表 显示全部
      playMode: 1, //播放模式, 1: 极速模式, 2: 在线模式
      roleInfo: {}, //租户信息
      playError: {}, //播放解码失败处理
      dbClick: 0, //双击在线播放窗口放大计时
      dbClickWin: false, //双击的窗口标识, 保证双击同一个窗口才变大
      winBig: false, //双击变大的窗口
      oneKeyAlarmShow: false, //一键告警弹出框
      oneKeyAlarmDatas: false, //一键告警入参数据
      screenshotImg: "", //快照
      screenshotKeep: false, //快照 保持小窗口
      screenshotBig: false, //快照 大图
      screenshotAutoClose: false, //快照 自动关闭
      screenBtn: false, //分屏按钮点击
      screenNum: 4, //分屏数量
      fullScreenFlag: false, //是否全屏
      cloudTouch: false, //触屏点击控制台样式
      cameraApertureMul: 1, //摄像机 倍数
      cameraApertureMulMin: 1, //摄像机 倍数 最小值
      cameraApertureMulMax: 8, //摄像机 倍数 最大值
      cameraApertureSpeed: 5, //摄像机 速度
      cameraApertureSpeedMin: 1, //摄像机 速度 最小值
      cameraApertureSpeedMax: 8, //摄像机 速度 最大值
      prePoints: false, //预置位
      cruisePoints: false, //巡航点
      cruiseing: false, //巡航中
      defensePoints: false, //看守位
      preAndDefensePoint: false, //预置位看守位显示
      cameraAutoDirectionType: false, //摄像机 位置设置标签点击
      cruiseConfigShow: false, //巡航计划配置弹出框
      fastPlayNum: 0, //快速播放窗口数量
      fastPlayCount: 0, //快速播放视频数量
      protocolTypeOptions: [], //流协议类型列表
      locks: new Map(), // 视频锁定控制参数
      startTime: 0, // 开始时间（时间戳）
      endTime: 0, // 完成的时间（时间戳）
      isStart: false, // 控制倒计时开始的时机（异步请求完成开启）
      optioning: false,
      duration: 900, // 锁定时长(s)
    };
  },
  watch: {
    choosedCameraDevice(val) {
      if (!val) {
        this.optioning = false;
      } else {
        this.getOptioning(true);
      }
    },
  },
  filters: {
    filterColor(value, key) {
      if (key && value.indexOf(key) !== -1) {
        return value.replaceAll(
          key,
          '<font style="color: #47F9FA">' + key + "</font>"
        );
      }
      return value;
    },
  },
  computed: {
    /**
     * 是否选中摄像机
     */
    isChecked() {
      let choosedCamera;
      try {
        choosedCamera = this.screenList[this.winChoosed].sources[0].camera;
      } catch (e) {
        choosedCamera = false;
      }
      return choosedCamera;
    },
    videoChoosed() {
      let choosed;
      try {
        choosed = this.screenList[this.winChoosed];
      } catch (e) {
        choosed = {};
      }
      return choosed;
    },
  },
  created() {},
  mounted() {
    console.log("-------screenList", this.screenList, this.winChoosed);
  },
  activated() {},
  deactivated() {},
  methods: {
    /**
     * 巡航暂停
     */
    doCruisePause() {
      if (!this.isChecked) {
        $message.w("请选择摄像机");
        return false;
      }
      this.$emit("doCruisePause", this.winChoosed);
    },
    /**
     * 查询正在锁定云台的人
     */
    async getOptioning(flag, async = 0) {
      clearTimeout(this.getOptioningTiming);
      this.getOptioningTiming = setTimeout(() => {
        const choosed = this.cameraCheckChoosed();
        if (!choosed) {
          return false;
        }
        const params = {
          deviceCode: choosed.deviceCode,
          channelCode: choosed.channelCode,
        };
        queryPlatFormLockInfo(params).then(
          (resp) => {
            this.optioning = false;
            const userId =
              Object.keys(this.vueIns).length === 0
                ? this.$store.getters.userInfo.userId
                : this.vueIns.$store.getters.userInfo.userId;
            const { userCode, userName, waitDuration } = resp.data || {};
            if (userCode && userCode !== userId) {
              //客户账号高权限抢占低权限操控权限后，低权限客户页面去掉倒计时
              const lockData = {
                endTime: new Date().getTime(),
                isStart: false,
              };
              this.locks.set(this.choosedCameraDevice, lockData);
              this.$refs.countDown.startCountDown();
              this.$parent.cloudLock(
                { isStart: lockData.isStart, endTime: lockData.endTime },
                this.winChoosed
              );
              this.optioning = userName + "正在操控云台";
            }
            if (userCode === userId && waitDuration) {
              const lockData = {
                endTime: new Date().getTime() + waitDuration * 1000,
                isStart: true,
              };
              this.locks.set(this.choosedCameraDevice, lockData);
              this.$refs.countDown.startCountDown();
              this.$parent.cloudLock(
                { isStart: lockData.isStart, endTime: lockData.endTime },
                this.winChoosed
              );
            }
            this.$parent.cloudLock(
              { optioning: this.optioning },
              this.winChoosed
            );
          },
          () => {
            this.optioning = false;
            this.$parent.cloudLock(
              { optioning: this.optioning },
              this.winChoosed
            );
          }
        );
      }, async);
    },
    /**
     * 关联事件跳转
     */
    gotoRelevantEvents() {
      const choosedCamera = this.cameraCheckChoosed(1);
      if (!choosedCamera) {
        return false;
      }
      this.$emit("gotoRelevantEventsItem", choosedCamera, this.winChoosed);
    },
    /**
     * 重置操作
     */
    resetOp() {
      this.lightEvents(2, 1);
      this.lightEvents(2, 2);
      this.lightEvents(2, 3);
    },
    /**
     * 开关灯
     */
    lightEvents(switchType, optType) {
      if (!this.checkPermissions("video:videoControlRole", true, 0)) {
        return false;
      }
      const choosedCamera = this.cameraCheckChoosed(1);
      if (!choosedCamera) {
        return false;
      }
      let params = {
        deviceCode: choosedCamera.deviceCode, //设备编码
        channelCode: choosedCamera.channelCode, //通道编码
        switchType: switchType, //1-开灯;2-关灯
        optType: optType, //1:雨刷  2灯光 3：透雾
      };
      doSwitchLight(params).then((res) => {
        if (res.code == 200) {
          if (optType == 1) {
            this.screenList[this.winChoosed].wiperOn = switchType == 1;
          } else if (optType == 2) {
            this.screenList[this.winChoosed].lightOn = switchType == 1;
          } else if (optType == 3) {
            this.screenList[this.winChoosed].wuLightOn = switchType == 1;
          }
        } else {
          $message.a(res);
        }
      });
      this.getOptioning();
    },
    /**
     * 云台锁定
     */
    gotoLockEvents(stop) {
      if (!this.checkPermissions("video:videoControlRole", true, 0)) {
        return false;
      }
      if (stop) {
        this.locks.set(stop, { isStart: false });
        return false;
      }
      const choosedCamera = this.cameraCheckChoosed(1);
      if (!choosedCamera) {
        return false;
      }
      // 获取当前通道数据
      let currentLockData = this.locks.get(this.choosedCameraDevice);
      // 数据不存在，则首次执行锁定
      if (!currentLockData) {
        this.doLockHandleFirst(choosedCamera);
      } else {
        // 解锁
        if (currentLockData.isStart) {
          this.doReleaseHandle(choosedCamera, currentLockData);
        } else {
          this.doLockHandle(choosedCamera, currentLockData);
        }
      }
    },
    doLockHandleFirst(choosedCamera) {
      let params = {
        deviceCode: choosedCamera.deviceCode, //设备编码
        channelCode: choosedCamera.channelCode, //通道编码
        customerCode: this.loginInfo.tenantId, //租户id
        duration: this.duration, //有效时长单位秒
      };
      doLock(params).then((res) => {
        if (res.code == 200) {
          $message.s("锁定成功");
          if (res.data && res.data.duration) {
            let lockData = {
              endTime: new Date().getTime() + res.data.duration * 1000,
              isStart: true,
            };
            this.locks.set(this.choosedCameraDevice, lockData);
            this.$refs.countDown.startCountDown();
            this.$parent.cloudLock(
              { isStart: lockData.isStart, endTime: lockData.endTime },
              this.winChoosed
            );
          } else {
            this.getOptioning(true);
          }
        } else {
          $message.a(res);
        }
        this.getOptioning();
      });
    },
    doLockHandle(choosedCamera, currentLockData) {
      let params = {
        deviceCode: choosedCamera.deviceCode, //设备编码
        channelCode: choosedCamera.channelCode, //通道编码
        customerCode: this.loginInfo.tenantId, //租户id
        duration: this.duration, //有效时长单位秒
      };
      doLock(params).then((res) => {
        if (res.code == 200) {
          $message.s("锁定成功");
          // 加锁 设置锁定时间
          if (res.data && res.data.duration) {
            currentLockData.endTime =
              new Date().getTime() + res.data.duration * 1000;
            currentLockData.isStart = true;
            this.$refs.countDown.startCountDown();
            this.$parent.cloudLock(
              {
                isStart: currentLockData.isStart,
                endTime: currentLockData.endTime,
              },
              this.winChoosed
            );
          } else {
            this.getOptioning(true);
          }
        } else {
          $message.a(res);
        }
        this.getOptioning();
      });
    },
    doReleaseHandle(choosedCamera, currentLockData) {
      let params = {
        deviceCode: choosedCamera.deviceCode, //设备编码
        channelCode: choosedCamera.channelCode, //通道编码
        customerCode: this.loginInfo.tenantId, //租户id
      };
      doRelease(params).then((res) => {
        if (res.code == 200) {
          $message.s("取消锁定成功");
          // 解锁
          currentLockData.endTime = new Date().getTime();
          currentLockData.isStart = false;
          this.$refs.countDown.startCountDown();
          this.$parent.cloudLock(
            {
              isStart: currentLockData.isStart,
              endTime: currentLockData.endTime,
            },
            this.winChoosed
          );
        } else {
          $message.a(res);
        }
        this.getOptioning();
      });
    },
    countDownS(x) {
      // 开始倒计时回调
    },
    countDownE() {
      // 结束倒计时回调
    },
    /**
     * 摄像机 校验被选中
     */
    cameraCheckChoosed(operContent) {
      let choosedCamera;
      try {
        choosedCamera = this.screenList[this.winChoosed].sources[0].camera;
      } catch (e) {
        choosedCamera = false;
      }
      if (!choosedCamera && operContent === 1) {
        $message.w("请选择摄像机");
      }
      return choosedCamera;
    },
    /**
     * 摄像机 方向控制
     */
    platformControl(e, operType, operContent) {
      if (!this.checkPermissions("video:videoControlRole", true, operContent)) {
        return false;
      }
      if (e) {
        e.preventDefault();
        if (operContent === 1) {
          this.cloudTouch = operType;
        } else {
          this.cloudTouch = false;
        }
      }
      const choosedCamera = this.cameraCheckChoosed(operContent);
      if (!choosedCamera) {
        return false;
      }
      let params = {
        deviceCode: choosedCamera.deviceCode, //设备编码
        channelCode: choosedCamera.channelCode, //通道编码
        customerCode: this.loginInfo.tenantId, //租户id
        operType: operType, //云台操作方向
        operContent: operContent, //转动开始/结束 1开始, 0结束
        step: this.cameraApertureSpeed, //速度
      };
      doPtzCmds(params).then((res) => {
        if (operContent == 0 && res.code != 200) {
          $message.a(res);
        }
        if (operContent == 0 && res.code == 200) {
          this.$parent.getCompass();
        }
        if (operContent === 1) {
          this.getOptioning(true);
        }
      });
    },
    /**
     * 校验权限
     */
    checkPermissions(value, ts, flag) {
      const all = "*:*:*";
      const permissions = this.$store.getters.permissions || [];
      const b = permissions.includes(all) || permissions.includes(value);
      if (!b && ts && flag === 0) {
        $message.w("您没有云台控制权限，请联系管理员。");
      }
      return b;
    },
    /**
     * 摄像机 倍数 改变
     */
    cameraApertureMulChange(e, operType, operContent) {
      if (!this.checkPermissions("video:videoControlRole", true, operContent)) {
        return false;
      }
      if (e) {
        e.preventDefault();
        if (operContent === 1) {
          this.cloudTouch = operType;
        } else {
          this.cloudTouch = false;
        }
      }
      const choosedCamera = this.cameraCheckChoosed(operContent);
      if (!choosedCamera) {
        return false;
      }
      let params = {
        deviceCode: choosedCamera.deviceCode, //设备编码
        channelCode: choosedCamera.channelCode, //通道编码
        customerCode: this.loginInfo.tenantId, //租户id
        operType: operType, //聚焦/缩放操作类型
        operContent: operContent, //动作开始/结束 1开始 0结束
        step: this.cameraApertureSpeed, //速度
      };
      let opMsg = operType == "" ? "聚焦" : "缩放";
      doCameraFocusOrZoom(params).then((res) => {
        if (operContent == 0 && res.code != 200) {
          $message.a(res);
        } else {
          this.$parent.getCompass();
        }
        if (operContent === 1) {
          this.getOptioning(true);
        }
      });
    },
    /**
     * 摄像机 速度 改变
     */
    cameraApertureSpeedChange(value, oldValue) {
      if (!this.checkPermissions("video:videoControlRole", true, 0)) {
        this.$nextTick(() => {
          this.cameraApertureSpeed = oldValue;
        });
        return false;
      }
      if (value === undefined) {
        this.cameraApertureSpeed = oldValue;
      }
    },
    /**
     * 转到预置位
     */
    gotoPrePoint(data) {
      let params = {
        deviceCode: this.preAndDefensePoint.deviceCode, //设备编码
        channelCode: this.preAndDefensePoint.channelCode, //通道编码
        presetId: data.presetId, //预置位 id
        customerCode: this.loginInfo.tenantId, //租户id
      };
      doControlPreset(params).then((res) => {
        if (res.code == 200) {
          this.$parent.getCompass();
        }
        this.getOptioning();
      });
    },
    /**
     * 开始巡航 结束巡航
     */
    doCruise(data) {
      let patrolType = data.startStop === "2" ? 1 : 2; //控制类型 1-停用；2-启用
      let params = {
        deviceCode: this.preAndDefensePoint.deviceCode, //设备编码
        channelCode: this.preAndDefensePoint.channelCode, //通道编码
        customerCode: this.loginInfo.tenantId, //租户id
        patrolId: data.patrolId, //巡航路径id
        patrolType: patrolType, //控制类型 1-停用；2-启用
      };
      doPatrol(params).then((res) => {
        if (res.code == 200) {
          this.getCruisePoint(1);
          $message.s(res.msg);
        } else {
          $message.a(res);
        }
        this.getOptioning();
      });
    },
    /**
     * 方法无效
     */
    invalidOp() {
      if (!this.checkPermissions("video:videoControlRole", true, 0)) {
        return false;
      }
      $message.e("暂不支持");
    },
  },
};
</script>
<style lang="scss" scoped>
.ptz-control {
  overflow: hidden;
  .pointer {
    cursor: pointer;
    &:hover {
      opacity: 0.6;
    }
    &:active {
      opacity: 0.8;
    }
  }
  .control-header {
    height: 32px;
    display: flex;
    align-items: center;
    margin: 6px 0 12px;
    position: relative;
    .item {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #e8f3fe;
      margin-left: 48px;
      &:first-child {
        margin-left: 0;
      }
      .ll {
        display: flex;
        align-items: center;
      }
      i {
        margin-right: 6px;
        font-size: 20px;
        line-height: 1;
      }
    }
  }
  .control-content {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    .control-direction {
      width: 168px;
      height: 168px;
      .direction {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        .item {
          position: absolute;
          top: 0;
          left: 0;
          width: 52px;
          height: 52px;
          line-height: 52px;
          text-align: center;
          background: rgba(79, 159, 255, 0.2);
          border-radius: 8px;
          color: #e8f3fe;
          z-index: 6;
          cursor: pointer;
          &:nth-child(1) {
            left: 58px;
            top: 0;
          }
          &:nth-child(2) {
            left: 116px;
            top: 0;
          }
          &:nth-child(3) {
            left: 116px;
            top: 58px;
          }
          &:nth-child(4) {
            left: 116px;
            top: 116px;
          }
          &:nth-child(5) {
            left: 58px;
            top: 116px;
          }
          &:nth-child(6) {
            left: 0;
            top: 116px;
          }
          &:nth-child(7) {
            left: 0;
            top: 58px;
          }
          &:nth-child(8) {
            left: 0;
            top: 0;
          }
          &:before {
            display: inline-block;
            content: "\e8c8";
            font-family: iconfont;
            font-size: 20px;
            transform: rotate(calc(#{var(--rotate)} + 22.5deg));
            margin: 0;
            text-align: center;
            width: auto;
          }
          &:hover {
            opacity: 0.6;
          }
          &:active {
            opacity: 0.8;
          }
        }
      }
      .scan {
        display: none;
      }
    }
    .control-other {
      flex: 1;
      margin-left: 4px;
      overflow: hidden;
      .item {
        height: 26px;
        margin-top: 2px;
        background: linear-gradient(
          90deg,
          rgba(160, 195, 239, 0) 0%,
          rgba(160, 195, 239, 0.04) 31%,
          rgba(76, 153, 246, 0.24) 100%
        );
        border-radius: 4px;
        padding-left: 0;
        display: flex;
        position: relative;
        z-index: 2;
        color: #e8f3fe;
        &:first-child {
          margin-top: 0;
        }
        span {
          flex: 1;
          height: 100%;
          text-align: center;
          border-left: 1px dotted rgba(232, 243, 254, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          &:first-child {
            border-left: 0;
          }
          i {
            font-size: 16px;
            line-height: 1;
            color: #e8f3fe;
            cursor: pointer;
            &:hover {
              opacity: 0.6;
            }
            &:active,
            &.touch {
              opacity: 0.8;
            }
            &.on {
              color: #4f9fff;
            }
          }
          .count {
            width: 36px;
            /deep/ .el-input__inner {
              background: none;
              border: 0;
              color: rgba(220, 235, 255, 1) !important;
              font-size: 14px;
            }
            /deep/ .el-input-number__decrease,
            /deep/ .el-input-number__increase {
              height: 12px;
              line-height: 11px;
              width: 16px;
              text-align: center;
              i {
                color: #e8f3fe !important;
                font-size: 14px;
                &.el-icon-arrow-up {
                  transform: translateY(0);
                }
                &.el-icon-arrow-down {
                  transform: translateY(-3px);
                }
                &:hover {
                  opacity: 0.6;
                }
                &:active {
                  opacity: 0.8;
                }
              }
              &.is-disabled {
                i {
                  opacity: 0.4 !important;
                }
              }
            }
          }
        }
        font {
          line-height: 1;
          margin: 0 6px;
          font-size: 14px;
          &.time {
            width: 62px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            background: rgba(79, 159, 255, 0.2);
            border-radius: 4px;
            color: rgba(232, 243, 254, 0.7);
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.g {
  .ptz-control {
    .control-header {
      .item {
        color: #e4e7c1;
        i {
          color: #ffeeb1;
        }
      }
    }

    .control-content {
      .control-direction {
        .direction {
          .item {
            line-height: 50px;
            background: linear-gradient(
              180deg,
              rgba(255, 230, 163, 0.37) 0%,
              rgba(134, 117, 80, 0.03) 100%
            );
            border: 1px solid #6e674e;
            color: #ffeeb1;
          }
        }
      }
      .control-other {
        .item {
          background: linear-gradient(
            90deg,
            rgba(122, 113, 61, 0) 0%,
            rgba(122, 113, 61, 0.25) 100%
          );
          color: #ffeeb1;
          span {
            border-left-color: rgba(228, 231, 193, 0.24);
            i {
              color: #ffeeb1;
              &.on {
                color: #fffa28;
              }
            }
            .count {
              /deep/ .el-input__inner {
                color: #ffeeb1 !important;
              }
              /deep/ .el-input-number__decrease,
              /deep/ .el-input-number__increase {
                i {
                  color: #ffeeb1 !important;
                }
              }
            }
          }
          font {
            color: #e4e7c1;
            &.time {
              background: rgba(122, 113, 61, 0.36);
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.l2 {
  .ptz-control {
    .control-header {
      .item {
        color: #fff;
        i {
          color: #fff;
        }
      }
    }

    .control-content {
      .control-direction {
        .direction {
          .item {
            line-height: 50px;
            background: linear-gradient(180deg, #132c2c 0%, #070e0d 100%);
            border: 1px solid #075b4a;
            color: #fff;
          }
        }
      }
      .control-other {
        .item {
          background: linear-gradient(
            90deg,
            rgba(2, 137, 109, 0) 0%,
            rgba(2, 137, 109, 0.2) 100%
          );
          span {
            border-left-color: rgba(255, 255, 255, 0.24);
            i {
              color: #fff;
              &.on {
                color: #f9ff6c;
              }
            }
            .count {
              /deep/ .el-input__inner {
                color: #fff !important;
              }
              /deep/ .el-input-number__decrease,
              /deep/ .el-input-number__increase {
                i {
                  color: #fff !important;
                  &:active {
                    color: #f9ff6c !important;
                  }
                }
              }
            }
          }
          font {
            color: #fff;
            &.time {
              background: rgba(2, 137, 109, 0.2);
            }
          }
        }
      }
    }
  }
}
</style>
